<template>
    <div class="storeAdministration">
<!--        这是门店详情管理页面-->
        <div class="detail">
<!--            图片 -->
            <div class="imgDiv">
                <img :src="storeData.shopImage" alt="">
            </div>
<!--            门店名称, 门店状态 -->
            <div class="name_satatus">
                <p>{{storeData.shopName}}</p>
                <p>{{storeData.shopStatus == 1? '上架中': '已下架'}}</p>
            </div>
<!--            门店手机号, 门店地址, 门店营业时间 -->
            <div class="tel_address">
                <p>店门手机号: {{storeData.shopPhone}}</p>
                <p>门店地址: {{storeData.shopDistrict}}</p>
                <p>门店营业时间: {{storeData.shopDescribe}}</p>
            </div>
<!--            添加时间 -->
            <div class="add_time">
                <p>添加时间: {{storeData.addTime}}</p>
            </div>
        </div>

<!--        搜索框等  -->
        <div class="search">
            <div class="search_name">
                <span>商品标题:</span>
                <input type="text" v-model="searchData.name">
            </div>

            <div class="block">
                <span class="demonstration">发布日期:</span>
                <el-date-picker
                        v-model="createData"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>

            <div class="search_button">
                <el-button type="primary" @click="searchGoodsArr">搜索</el-button>
            </div>
            <div class="search_button">
                <el-button type="primary" @click="addNewGoods">新增商品</el-button>
            </div>
        </div>

<!--        商品表格  -->
        <el-table :cell-style="rowStyle"
                  :data="storeDataSource.list"
                  :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                  border
                  style="width: 100%">
            <el-table-column
                    fixed
                    align="center"
                    prop="goodsImage"
                    label="商品图片"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="goodsName"
                    label="商品名字"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="goodsPresentPrice"
                    label="商品现价"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="goodsSalesVolume"
                    label="商品销量"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="goodsCartCount"
                    label="商品购物车数量"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button type="text" @click="editGoods(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--        弹框  -->
        <div>
            <!--            新增商品弹窗  -->
            <div>
                <el-dialog title="新增商品" :visible.sync="dialogNewGoodsVisible">
                    <el-form :model="newGoods">
                        <el-form-item label="商品名称" :label-width="'100px'">
                            <el-input v-model="newGoods.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品图片" :label-width="'100px'">
                            <el-upload
                                    action=""
                                    :show-file-list="false"
                                    on-success=""
                                    before-upload="">
                                <!--                                <img v-if="newStore.shopImage" :src="newStore.shopImage">-->
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="商品现价" :label-width="'100px'">
                            <el-input v-model="newGoods.price" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogNewGoodsVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddGoods">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "StoreAdministration",
        data: function(){
            return {
                storeDataSource: "",
                createData: ['',''], // 时间
                searchData: {  // 搜索的数据
                    name: '',
                },
                dialogNewGoodsVisible: false,
                newGoods: {
                    name: '',
                    imgUrl: '',
                    price: '',
                }

            }
        },
        created() {
            this.getGoodsData()
        },
        methods:{
            // 得到门店内的商品列表
            getGoodsData(){
                this.axios.request("shop/getPanghuShopGoodsList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        goodsName: '',
                        goodsStatus: '',
                        shopId: this.storeData.shopId,
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.storeDataSource = res.data.data;
                    console.log(this.storeDataSource)
                    console.log(this.storeData.shopId)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 编辑商品按钮 事件
            editGoods(row){},
            // 搜索按钮事件
            searchGoodsArr(){
                this.axios.request("/shop/getPanghuShopGoodsList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        goodsName: this.searchData.name,
                        goodsStatus: '',
                        shopId: this.storeData.shopId,
                        startTime: this.createData[0],
                        endTime: this.createData[1],
                    }
                }).then((res) => {
                    this.storeDataSource = res.data.data;
                    console.log(this.storeDataSource)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 新增商品按钮
            addNewGoods(){
                this.dialogNewGoodsVisible = true;
            },
            // 新增商品 --- 确定新增按钮  /goods/addShopGoods
            confirmAddGoods(){
                this.dialogNewGoodsVisible = false;
                this.axios.post("/goods/addShopGoods", {
                    goodsImage: this.newGoods.imgUrl,
                    goodsName: this.newGoods.name,
                    goodsPresentPrice: this.newGoods.price,
                    goodsUnit: "",
                    shopId: this.storeData.shopId,
                }).then((res) => {
                    console.log(res.data)
                    this.getGoodsData();
                }).catch((err) => {
                    console.log(err)
                });
            }

        },
        computed:{
            storeData: function () {
                return this.$route.query;
            }
        }
    }
</script>

<style scoped>

    .storeAdministration{
        width: 97%;
        padding: 1.5%;

    }
    .detail{
        /*background-color: #f5baba;*/
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .imgDiv{
        width: 110px;
        height: 108px;
        border: 1px solid #dddddd;
    }
    .name_satatus{
        width: 200px;
        height: 110px;
        /*background-color: #40AFFE;*/
        margin-left: 20px;
    }
    .tel_address{
        width: 30%;
        height: 110px;
        /*background-color: #00F7DE;*/
        margin-left: 20px;
    }
    .add_time{
        width: 30%;
        height: 110px;
        /*background-color: #00F7DE;*/
        margin-left: 20px;
    }
    p{
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        /*background-color: #7b72fa;*/
        margin-bottom: 5px;
    }
    .search{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .search .search_name{
        width: 280px;
        height: 50px;
        /*background-color: #2D93CA;*/
        margin-right: 10px;
    }
    .search_name>span{
        line-height: 50px;
        float: left;
        margin-right: 10px;
    }
    .search_name>input{
        width: 60%;
        line-height: 35px;
        font-size: 14px;
        float: left;
        margin-top: 7px;
        padding-left: 10px;
        outline: none;
        border-radius: 3px;
        border: 1px solid #dddddd;
    }
    .block{
        /*background-color: #00F7DE;*/
        margin-right: 20px;
    }
    .demonstration{
        margin-right: 10px;
        line-height: 50px;
    }
    .search_button{
        line-height: 50px;
        margin-left: 10px;
    }



</style>